<template>
   <el-table :data="permissionArr" style="width: 100%; margin-bottom: 20px" row-key="id" border>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作">
         <!-- row:即为已有的菜单|按钮对象的数据 -->
         <template #="{ row, $index }">
            <el-button type="primary" size="small" :disabled="row.level == 4 ? true : false" @click="addMenu(row)">
               {{ row.level == 3 ? '添加功能' : '添加菜单' }}</el-button>
            <el-button type="primary" size="small" :disabled="row.level == 1 ? true : false"
               @click="updateMenu(row)">编辑</el-button>
            <el-popconfirm :title="`你确定要删除${row.name}？`" width="260px" @confirm="confirm(row.id)">
               <template #reference>
                  <el-button type="primary" size="small" :disabled="row.level == 1 ? true : false">删除</el-button>
               </template>
            </el-popconfirm>
         </template>
      </el-table-column>
   </el-table>
   <!-- 对话框组件：添加|更新已有的菜单结构 -->
   <el-dialog v-model="dialogVisible" :title="menuData.id ? '更新菜单' : '添加菜单'" width="30%" style="padding: 20px;">
      <!-- 表单组件:收集数据 -->
      <el-form>
         <el-form-item label="名称">
            <el-input placeholder="请你输入菜单的名称" v-model="menuData.name"></el-input>
         </el-form-item>
         <el-form-item label="权限">
            <el-input placeholder="请你输入权限值" v-model="menuData.code"></el-input>
         </el-form-item>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
         </span>
      </template>
   </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
// 引入获取菜单权限的API
import { reqAllPermission, reqAddOrUpdateMenu, reqDeleteMenu } from '@/api/acl/menu'
// 引入数据类型
import type { PermissionDataList, PermissionData, MenuParams } from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus';
// 存储菜单的数据
let permissionArr = ref<PermissionDataList>([])
// 控制对话框的显示与隐藏
let dialogVisible = ref<boolean>(false)
// 携带的参数
let menuData = reactive<MenuParams>({
   code: '',
   level: 0,
   name: '',
   pid: 0
})
// 组件挂载完毕
onMounted(() => {
   getHasPermission()
})
// 获取菜单数据的方法
const getHasPermission = async () => {
   let result = await reqAllPermission()
   if (result.code == 200) {
      permissionArr.value = result.data
   }
}
// 添加菜单按钮的回调
const addMenu = (row: PermissionData) => {
   // 清空数据
   Object.assign(menuData, {
      id: 0,
      code: '',
      level: 0,
      name: '',
      pid: 0
   })
   // 对话框显示
   dialogVisible.value = true
   // 收集数据
   menuData.level = row.level + 1
   menuData.pid = (row.id as number)
}
// 编辑按钮的回调
const updateMenu = (row: PermissionData) => {
   // 对话框显示
   dialogVisible.value = true
   // 收集数据
   Object.assign(menuData, row)
}
// 确定按钮的回调
const save = async () => {
   let result = await reqAddOrUpdateMenu(menuData)
   if (result.code == 200) {
      dialogVisible.value = false
      ElMessage.success(menuData.id ? '更新成功！' : '添加成功')
      getHasPermission()
   } else {
      dialogVisible.value = false
      ElMessage.error(menuData.id ? '更新失败！' : '添加失败')
   }
}
// 气泡确认框确定按钮的回调
const confirm = async (id: number) => {
   let result = await reqDeleteMenu(id)
   if (result.code == 200) {
      ElMessage.success('删除成功！')
      getHasPermission()
   } else {
      ElMessage.error(`删除失败！${result.data}`)
   }
}
</script>

<style lang="scss" scoped></style>@/api/acl/menu